<template>
  <div class="askRoadPanel" id="askRoadPanel">
    <div class="askRoadTitle">
      <div class="closeRoad" @click="closeAskRoad">
        <img src="@/assets/images/close4.png" alt="">关闭
      </div>
      <div class="askLeftBar" v-if="showLeftBar">
        <ul>
          <li v-for="(item,index) in leftBarArr" @click="changeBar(index)" :class="{leftBarActive:checkedNavIndex==index}"><span>{{item}}</span></li>
        </ul>
      </div>
      <Tabs value="dxRoad" @on-click="getData" class="zzz">
        <TabPane label="大小问路" name="dxRoad">
          <!-- <loading  :size=30></loading> -->
          <Spin fix v-if="loading"></Spin>
          <template v-else>
            <div class="dlPanel">
              <div class="dlTd" v-for="(item,index) in bigRoad" :class="{dlTdLast: index==bigRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{dlRedSpan: item1[0]=='red', dlBlueSpan: item1[0]=='blue'}" v-if="item1.length>0"></span>
                  <i v-if="item1[1]!=0" :class="{redI: item1[1]=='2',blueI: item1[1]=='1'}"></i>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter1">大路</div>
            
            <div class="dlPanel">
              <div class="dyTd" v-for="(item,index) in bigEyes" :class="{dyTdLast: index==bigEyes.length-1}">
                <div v-for="item1 in item">
                  <span :class="{dyRedSpan: item1=='red', dyBlueSpan: item1=='blue'}" v-if="item1.length>0"></span>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter2">大眼仔</div>
            
            <div class="dlPanel">
              <div class="dyTd xlTd" v-for="(item,index) in smallRoad" :class="{dyTdLast: index==smallRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{dyRedSpan: item1=='red', dyBlueSpan: item1=='blue'}" v-if="item1.length>0"></span>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter3">小路</div>
            
            <div class="dlPanel">
              <div class="tlTd" v-for="(item,index) in tlRoad" :class="{tlTdLast: index==tlRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{tlRedSpan: item1=='red', tlBlueSpan: item1=='blue'}" v-if="item1.length>0"></span>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter4">蟑螂路</div>
            
            <div class="dlPanel">
              <div class="zpTd" v-for="(item,index) in zpRoad" :class="{zpTdLast: index==zpRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{zpRedSpan: item1[0]=='red', zpBlueSpan: item1[0]=='blue'}" v-if="item1.length>0">{{item1[0]=='red'?'大':'小'}}</span>
                  <i v-if="item1[1]!=0" :class="{redI: item1[1]=='2',blueI: item1[1]=='1'}"></i>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter5">珠盘路</div>
          </template>
        </TabPane>
        <TabPane label="单双问路" name="dsRoad">
          <Spin fix v-if="loading"></Spin>
          <template v-else>
            <div class="dlPanel">
              <div class="dlTd" v-for="(item,index) in bigRoad" :class="{dlTdLast: index==bigRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{dlRedSpan: item1[0]=='red', dlBlueSpan: item1[0]=='blue'}" v-if="item1.length>0"></span>
                  <i v-if="item1[1]!=0" :class="{redI: item1[1]=='2',blueI: item1[1]=='1'}"></i>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter1">大路</div>
            
            <div class="dlPanel">
              <div class="dyTd" v-for="(item,index) in bigEyes" :class="{dyTdLast: index==bigEyes.length-1}">
                <div v-for="item1 in item">
                  <span :class="{dyRedSpan: item1=='red', dyBlueSpan: item1=='blue'}" v-if="item1.length>0"></span>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter2">大眼仔</div>
            
            <div class="dlPanel">
              <div class="dyTd xlTd" v-for="(item,index) in smallRoad" :class="{dyTdLast: index==smallRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{dyRedSpan: item1=='red', dyBlueSpan: item1=='blue'}" v-if="item1.length>0"></span>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter3">小路</div>
            
            <div class="dlPanel">
              <div class="tlTd" v-for="(item,index) in tlRoad" :class="{tlTdLast: index==tlRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{tlRedSpan: item1=='red', tlBlueSpan: item1=='blue'}" v-if="item1.length>0"></span>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter4">蟑螂路</div>
            
            <div class="dlPanel">
              <div class="zpTd" v-for="(item,index) in zpRoad" :class="{zpTdLast: index==zpRoad.length-1}">
                <div v-for="item1 in item">
                  <span :class="{zpRedSpan: item1[0]=='red', zpBlueSpan: item1[0]=='blue'}" v-if="item1.length>0">{{item1[0]=='red'?'双':'单'}}</span>
                  <i v-if="item1[1]!=0" :class="{redI: item1[1]=='2',blueI: item1[1]=='1'}"></i>
                </div>
              </div>
            </div>
            <div class="tbFooter tbFooter5">珠盘路</div>
          </template>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import _ from "lodash";
import loading from '@/common/components/loading'
export default {
  props: [],
  beforeCreate() {},
  data() {
    return {
      loading: true,
      nextIssue: true,
      showLeftBar: true,
      lottery_type: this.$route.query.lottery_type,
      token: localStorage.getItem('token'),
      bigRoad: [],
      smallRoad: [],
      bigEyes: [],
      tlRoad: [],
      zpRoad: [],
      leftBarArr: [],
      checkedNavIndex: 0,
      roadActive: 'dxRoad',
      posKey:0,
      arrMinLen: [0,0],
    };
  },
  components: {loading:loading},
  created() {},
  mounted() {
    this.initLeftBar()
    this.getData(this.roadActive);
    
  },
  methods: {
    initLeftBar: function(){
      var lottery_type = this.$route.query.lottery_type
      if(lottery_type==1||lottery_type==3||lottery_type==17||lottery_type==18||lottery_type==20||lottery_type==22){
        this.showLeftBar=false
      }else if(lottery_type==2||lottery_type==4||lottery_type==9||lottery_type==14){
        this.leftBarArr=['冠亚和','冠军','亚军','第三名','第四名','第五名','第六名','第七名','第八名','第九名','第十名']
      }else if(lottery_type==5||lottery_type==6||lottery_type==11||lottery_type==21){
        this.leftBarArr=['猜总和','第一球','第二球','第三球','第四球','第五球']
      }else if(lottery_type==7||lottery_type==8){
        this.leftBarArr=['正码总和','正1特','正2特','正3特','正4特','正5特','正6特','特码']
      }else if(lottery_type==10){
        this.leftBarArr=['猜总和','第一张','第二张','第三张','第四张','第五张']
      }else if(lottery_type==13||lottery_type==19){
        this.leftBarArr=['猜总和','第一骰','第二骰','第三骰']
      }
      if(this.showLeftBar){
        this.arrMinLen=[20,34]
      }else{
        this.arrMinLen=[23,38]        
      }
    },
    getData: function(name){
      this.roadActive = name
      var that = this
      let askType = 1
      if(name=='dsRoad'){
        askType = 2
      }else if(name=='clRoad'){
        this.$Message.warning('暂未开放，尽请期待')
        return
      }
      this.loading=true
      let apiUrl = ''
      if(this.lottery_type==1||this.lottery_type==3||this.lottery_type==17||this.lottery_type==18||this.lottery_type==20||this.lottery_type==22){
        apiUrl = '?m=api&c=askload&a=createLoad28'
      }else if(this.lottery_type==2||this.lottery_type==4||this.lottery_type==9||this.lottery_type==14){
        apiUrl = '?m=api&c=askload&a=createLoadPK10'        
      }else if(this.lottery_type==5||this.lottery_type==6||this.lottery_type==11||this.lottery_type==21){
        apiUrl = '?m=api&c=askload&a=createLoadSSC'
      }else if(this.lottery_type==7||this.lottery_type==8){
        apiUrl = '?m=api&c=askload&a=createLoadLHC'
      }else if(this.lottery_type==10){
        apiUrl = '?m=api&c=askload&a=createLoadNN'
      } else if (this.lottery_type == 13||this.lottery_type==19) {
        apiUrl = '?m=api&c=askload&a=createLoadSB'
      }
      fetchJson(this, apiUrl, {
        ask_type: askType,
        lottery_type: this.lottery_type,
        token: this.token,
        pos_key: this.posKey
      }).then(result => {
        // this.bigRoad = result.data.big_load
        // this.smallRoad = result.data.small_load
        // this.bigEyes = result.data.dyz_load
        // this.tlRoad = result.data.zl_load
        // this.zpRoad = result.data.zp_load
        this.bigRoad = this.addLength(result.data.big_load,this.arrMinLen[0])        
        this.smallRoad = this.addLength(result.data.small_load,this.arrMinLen[1])
        this.bigEyes = this.addLength(result.data.dyz_load,this.arrMinLen[1])        
        this.tlRoad = this.addLength(result.data.zl_load,this.arrMinLen[0])
        this.zpRoad = this.addLength(result.data.zp_load,this.arrMinLen[0],true)
        this.loading=false
        setTimeout(function(){
          var panelList = document.getElementsByClassName('dlPanel')
          let newArr = []
          for(var i=0;i<panelList.length;i++){
            newArr.push(panelList[i])
          }
          for(var j=0;j<newArr.length;j++){
            var panel = newArr[j]
            if(panel.scrollWidth>550){
              panel.scrollLeft=panel.scrollWidth
            }
          }
        })
      });
    },
    addLength: function(arr,length,isZp){
      
      for(var i = 0;i<arr.length;i++){
        var flag = true
        if(arr[i].length<length){
          arr[i].push([])
          this.addLength(arr,length)
          continue
        }else if(arr[i].length>length&&flag){
          arr[i].push([])
          arr[i].push([])
          flag = false
        }
      }
      return arr
    },
    closeAskRoad: function(){
      this.$store.commit('setShowAskRoad',false)
    },
    changeBar: function(index){
      this.checkedNavIndex = index
      this.posKey = index
      this.getData(this.roadActive)
    }
  },
  watch: {
  },
  beforeDestroy() {}
};
</script>
<style scoped>

  .askRoadPanel{position: absolute;right: -605px;top: 0px;z-index: 98;background: white;width: 605px;height: 100%;animation: fadePanel 2s forwards;opacity: 0;overflow: hidden;}
  .dlPanel{margin: 10px;border: 1px dashed #C7C7C7;overflow-x: scroll;position: relative;min-height: 100px;overflow-y: hidden;}
  .dlTd,.dyTd,.tlTd,.zpTd{display: flex;}
  .dlTd>div,.tlTd>div,.zpTd>div{position: relative;min-width: 26px;height: 25px;}
  .dyTd>div{position: relative;min-width: 15px;height: 15px;}
  .dlTd>div:last-child,.dyTd>div:last-child,.tlTd>div:last-child,.zpTd>div:last-child{border-right: 0px;}
  .dlTd>div>span{border-radius: 50%;width: 18px;height: 18px;display: block;margin-top: 3px;margin-left: 3px;}
  .dyTd>div>span{border-radius: 50%;width: 10px;height: 10px;display: block;margin-top: 2px;margin-left: 2px;}
  .tlTd>div>span{width: 24px;height: 2px;transform: rotate(-45deg);display: block;margin-top: 11px;margin-right: 3px;}
  .zpTd>div>span{border-radius: 50%;color: white;width: 20px;height: 20px;display: block;margin-top: 2px;margin-left: 2px;font-size: 12px;text-align: center;line-height: 20px;}
  .xlTd>div>span{background: white;}
  .xlTd .dyRedSpan{border: 2px solid #FF0000}
  .xlTd .dyBlueSpan{border: 2px solid #0A49FF}
  .dlTd>div>i,.zpTd>div>i{position: absolute;width: 6px;height: 6px;border-radius: 50%;}
  .dlTd .redI{top: 2px;left: 5px;background: #FF0000;}
  .zpTd .redI{top: 1px;left: 3px;background: #FF0000;}
  .dlTd .blueI{bottom: 2px;right: 5px;background: #0A49FF;}
  .zpTd .blueI{bottom: 1px;right: 3px;background: #0A49FF;}
  .dlRedSpan{border: 1px solid #FF0000;}
  .dyRedSpan,.tlRedSpan,.zpRedSpan{background: #FF0000;}
  .dlBlueSpan{border: 1px solid #0A49FF;}
  .dyBlueSpan,.tlBlueSpan,.zpBlueSpan{background: #0A49FF;}
  .tbFooter{text-align: right;margin-right: 5px;position: absolute;right: 12px;width: 15px;}
  .tbFooter1{top: 16%;}
  .tbFooter2{top: 30%;}
  .tbFooter3{top: 50%;}
  .tbFooter4{top: 72%;}
  .tbFooter5{top: 97%;}
  .dlTd>div,.dyTd>div,.tlTd>div,.zpTd>div{border-right: 1px dashed #C7C7C7;border-bottom: 1px solid #C7C7C7;}
  .dlTdLast>div,.dyTdLast>div,.tlTdLast>div,.zpTdLast>div{border-right: 1px dashed #C7C7C7;border-bottom: 0px;}
  .closeRoad{position: absolute;right: 10px;color:#BE2633;top: 16px;z-index: 2;line-height: 21px;cursor: pointer;}
  .closeRoad img{vertical-align: middle;margin-right: 4px;}
  .askRoadTitle{overflow: hidden;}
  .askLeftBar{width: 64px;height: 760px;float: left;background: #F9F9F9;color: #464646;box-shadow: 1px 0px 0px 0px rgba(221,221,221,1);border-left: 1px solid rgb(221, 221, 221) }
  .askLeftBar ul{text-align: center;margin-top: 54px;}
  .askLeftBar ul li{line-height: 50px;cursor: pointer;}
  .askLeftBar ul li span{padding: 5px 0px;}
  /* .askLeftBar ul li span:hover{color: #BF2734;border-bottom: 3px solid #C8313C;} */
  .leftBarActive span{color: #BF2734;border-bottom: 3px solid #C8313C;}
</style>
<style>
  .askRoadPanel .ivu-tabs-nav{float: none;margin: 0 auto;width: 270px;}
  .askRoadPanel .ivu-tabs-tab{padding: 16px !important;font-weight: bold;}
  .askRoadPanel .ivu-tabs-bar{margin: 0 auto;}
  .askRoadPanel .ivu-tabs-tabpane{overflow-y: scroll;height: 708px;position: relative;overflow-x: hidden;}
</style>



// WEBPACK FOOTER //
// src/components/room/playMethods/askRoad/askRoad.vue